import Vue from 'vue'
import "./jquery.min.js"
import { fvizMixin, FViz } from "./fviz.js"
Vue.component('fviz-pgsbar', {
  mixins: [fvizMixin],
  render: function (createElement) {

    let isAbsloute = (FViz.LAYTOUT_ABSLOUTE == this.options.layoutMode);
    let me = this;
    //图表容器样式
    let contStyle = {};

    if (isAbsloute) {
      contStyle.left = this.options.left + "px";
      contStyle.top = this.options.top + "px";
      contStyle.position = "absolute";
      //"z-index": (++cnt) * 30
    }

    //翻转样式
    if (this.options.turnAngle && this.options.turnAngle != 0) {
      contStyle["transform"] = "rotate(" + this.options.turnAngle + "deg)";
      contStyle["-ms-transform"] = "rotate(" + this.options.turnAngle + "deg)";
      contStyle["-moz-transform"] = "rotate(" + this.options.turnAngle + "deg)";
      contStyle["-webkit-transform"] = "rotate(" + this.options.turnAngle + "deg)";
      contStyle["-o-transform"] = "rotate(" + this.options.turnAngle + "deg)";
    }

    if (this.options.preview && !isAbsloute) {
      contStyle['width'] = '100%';
      contStyle['height'] = '100%';
    } else {
      contStyle['width'] = this.options.fwidth + "px";
      contStyle['height'] = this.options.fheight + "px";
    }

    if (this.options.borderWidth || this.options.borderColor || this.options.borderCornerValue) {
      contStyle['border'] = "solid";

    }
    contStyle['border-width'] = this.options.borderWidth;
    contStyle['border-color'] = this.options.borderColor;
    if (this.options.borderCorner) {
      if (this.options.borderCornerValue) {
        for (var i = 0; i < this.options.borderCornerValue.length; i++) {
          if (i == 0) {
            contStyle['border-top-left-radius'] = this.options.borderCornerValue[0] + "px";
          } else if (i == 1) {
            contStyle['border-top-right-radius'] = this.options.borderCornerValue[1] + "px";
          } else if (i == 2) {
            contStyle['border-bottom-right-radius'] = this.options.borderCornerValue[2] + "px";
          } else if (i == 3) {
            contStyle['border-bottom-left-radius'] = this.options.borderCornerValue[3] + "px";
          }
        }
      }

    };

    contStyle['border-radius'] = this.options.borderCornerValue + "px";
    contStyle['background-color'] = this.options.backgroudColor;




    //图表容器定义
    let elProgress = {};
    if (this.options.vizType == "bar") {
      elProgress = { 'el-progress': true, 'el-progress--line': true };
    } else if (this.options.vizType == "circle") {
      elProgress = { 'el-progress': true, 'el-progress--circle': true };
    } else {
      elProgress = { 'el-progress': true, 'el-progress--dashboard': true };
    }
    let elProgressStyle = {};
    // if (this.options.preview && !isAbsloute) {
    //   elProgressStyle['width'] = '100%';
    //   elProgressStyle['height'] = '100%';
    //   elProgressStyle['display'] = 'flex';
    //   elProgressStyle['justify-content'] = 'center';

    // }



    let elProgressAttars = {
      role: "progressbar", 'aria-valuemin': "0", 'aria-valuemax': "100", 'aria-valuenow': this.options.percentage
    }

    let elProgressBar = { 'el-progress-bar': true }

    let elProgressBarOuter = { 'el-progress-bar__outer': true }
    let elProgressBarOuterStyle = {};
    elProgressBarOuterStyle["height"] = this.options.strokeWidth + "px";

    let elProgressBarInner = { 'el-progress-bar__inner': true }
    let elProgressBarInnerStyle = this.barStyle();

    let elProgressBarInnerText = { 'el-progress-bar__innerText': true };



    let renderCont1;
    if (this.options.vizType == "bar") {
      renderCont1 = createElement('div', {
        'class': elProgressBar,

      }, [
        createElement('div', {
          'class': elProgressBarOuter,
          style: elProgressBarOuterStyle,

        }, [
          createElement('div', {
            'class': elProgressBarInner,
            style: elProgressBarInnerStyle,

          }, [
            // createElement('div', {
            //   'class': elProgressBarInnerText,
            //   domProps: {
            //     innerHTML: this.percent * 100
            //   },

            // })
          ])
        ])
      ])

    } else {
      let elProgressCircle = { 'el-progress-circle': true }

      let elProgressCircleStyle = {}
      // if (this.options.preview && !isAbsloute) {
      //   if (this.options.vizType == "circle") {
      //     elProgressCircleStyle = { 'height': '90%', 'width': '90%' }
      //   } else {
      //     elProgressCircleStyle = { 'height': '100%', 'width': '100%' }
      //   }
      // } else {
      elProgressCircleStyle = { 'height': this.options.fwidth + "px", 'width': this.options.fwidth + "px" }

      //  }


      let elProgressCircleTrack = { 'el-progress-circle__track': true }
      let elProgressCircleAttrsStyle = this.trailPathStyle();
      let elProgressCircleAttrs = { d: this.trackPath(), stroke: "#e5e9f2", fill: "none", 'stroke-width': this.relativeStrokeWidth(), 'stroke-linecap': this.options.strokeLinecap }

      let elProgressCirclepath = { 'el-progress-circle__path': true }

      let elProgressCirclepathAttrs = { d: this.trackPath(), stroke: this.stroke, fill: "none", 'stroke-linecap': this.options.strokeLinecap, 'stroke-width': this.options.percentage ? this.relativeStrokeWidth() : 0 }
      let elProgressCirclepathStyle = this.circlePathStyle();

      renderCont1 =
        createElement('div', {
          'class': elProgressCircle,
          style: elProgressCircleStyle

        }, [
          createElement('svg', {
            attrs: {
              viewBox: "0 0 100 100"
            }

          }, [
            createElement('path', {
              'class': elProgressCircleTrack,
              attrs: elProgressCircleAttrs,
              style: elProgressCircleAttrsStyle,
            }),
            createElement('path', {
              'class': elProgressCirclepath,
              attrs: elProgressCirclepathAttrs,
              style: elProgressCirclepathStyle
            })
          ]),

        ]
        );
    }

    //进度样式定义
    let elProgressText = { 'el-progress__text': true }
    let elProgressTextStyle = this.progressTextSize();


    let renderCont2 = {};
    renderCont2 = createElement('div', {
      'class': elProgressText,
      style: elProgressTextStyle,
      domProps: {
        innerHTML: this.options.percentage + "%"
      },

    })

    let renderCont3 = {};
    //标签样式定义
    let labelStyle = {};
    labelStyle["font-size"] = this.options.labelFontSize + 'px';
    if (this.options.labelFontWeight) {
      labelStyle["font-weight"] = this.options.labelFontWeight.value;
    }
    labelStyle["color"] = this.options.labelFontColor;

    labelStyle["position"] = "absolute"
    labelStyle["width"] = "100%";
    labelStyle["border"] = "solid"
    labelStyle["textAlign"] = "center"
    labelStyle["borderRadius"] = "20px"
    labelStyle["overflow"] = "hidden"
    labelStyle["text-overflow"] = "ellipsis"
    labelStyle["white-space"] = "nowrap"
    labelStyle["bottom"] = this.options.lableBottom + "px"
    labelStyle["line-height"] = this.options.lableLineHeight

    renderCont3 = createElement('div', {
      style: labelStyle,
      domProps: {
        innerHTML: this.options.labelName
      },
    });
    let elProgressContent = {}
    if (this.options.vizType == "bar") {
      elProgressContent = createElement('div', {
        'class': elProgress
        ,
        attrs: elProgressAttars,

        style: elProgressStyle

      }, [
        renderCont1, renderCont2
      ])
    } else {
      elProgressContent = createElement('div', {
        'class': elProgress
        ,
        attrs: elProgressAttars,
        style: elProgressStyle
      }, [
        renderCont1, renderCont2, renderCont3
      ])
    }


    let renderCont = createElement('div', {
      ref: "renderCont",
      style: contStyle,
    }, [elProgressContent])
    //宽度高度不能在wrap div上，否则拖动时候wrap div不能移动
    //wrap div

    if (isAbsloute && !this.options.preview) {
      return createElement('div',
        [renderCont]
      );
    } else {
      return renderCont;
    }

  },

  data() {
    return {


      options: "",


    }
  },
  props: {
    objVal: {
      type: Object,
      default: () => {
        return {}
      }
    },
  },
  watch: {

  },
  methods: {
    barStyle() {
      const style = {};
      style.width = this.options.percentage + "%";
      style.backgroundColor = this.options.pgsColor;
      return style;
    },
    progressTextSize() {
      const style = {};
      let size = this.options.vizType === "bar"
        ? 12 + this.options.strokeWidth * 0.4
        : this.options.fwidth * 0.111111 + 2;
      style['font-size'] = size + "px";
      style["color"] = this.options.prsFontColor;
      if (this.options.prsFontWeight) {
        style["fontWeight"] = this.options.prsFontWeight.value;
      }
      return style;
    },
    copyObj() {
      if (!Array.isArray) {
        Array.isArray = function (arg) {
          return Object.prototype.toString.call(arg) === '[object Array]';
        };
      }
      var name = void 0,
        options = void 0,
        src = void 0,
        copy = void 0,
        copyIsArray = void 0,
        clone = void 0,
        i = 1,
        target = arguments[0] || {},
        // 使用||运算符，排除隐式强制类型转换为false的数据类型
        deep = false,
        len = arguments.length;
      if (typeof target === 'boolean') {
        deep = target;
        target = arguments[1] || {};
        i++;
      }
      if ((typeof target === 'undefined' ? 'undefined' : this._typeof(target)) !== 'object' && typeof target !== 'function') {
        target = {};
      }
      // 如果arguments.length === 1 或typeof arguments[0] === 'boolean',且存在arguments[1]，则直接返回target对象
      if (i === len) {
        return target;
      }
      for (; i < len; i++) {
        //所以如果源对象中数据类型为Undefined或Null那么就会跳过本次循环，接着循环下一个源对象
        if ((options = arguments[i]) != null) {
          // 如果遇到源对象的数据类型为Boolean, Number for in循环会被跳过，不执行for in循环// src用于判断target对象是否存在name属性
          for (name in options) {
            // src用于判断target对象是否存在name属性
            src = target[name];
            // 需要复制的属性当前源对象的name属性
            copy = options[name];
            // 判断copy是否是数组
            copyIsArray = Array.isArray(copy);
            // 如果是深复制且copy是一个对象或数组则需要递归直到copy成为一个基本数据类型为止
            if (deep && copy && ((typeof copy === 'undefined' ? 'undefined' : this._typeof(copy)) === 'object' || copyIsArray)) {
              if (copyIsArray) {
                copyIsArray = false;
                // 如果目标对象存在name属性且是一个数组
                // 则使用目标对象的name属性，否则重新创建一个数组，用于复制
                clone = src && Array.isArray(src) ? src : [];
              } else {
                // 如果目标对象存在name属性且是一个对象则使用目标对象的name属性，否则重新创建一个对象，用于复制
                clone = src && (typeof src === 'undefined' ? 'undefined' : this._typeof(src)) === 'object' ? src : {};
              }
              // 深复制，所以递归调用copyObject函数
              // 返回值为target对象，即clone对象
              // copy是一个源对象
              target[name] = copyObj(deep, clone, copy);
            } else if (copy !== undefined) {
              // 浅复制，直接复制到target对象上
              target[name] = copy;
            }
          }
        }
      }
      return target;
    },
    _typeof() {
      return typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
    },
    relativeStrokeWidth() {
      return ((this.options.strokeWidth / this.options.fwidth) * 100).toFixed(1);
    },
    radius() {
      if (this.options.vizType === "circle" || this.options.vizType === "dashboard") {
        return parseInt(50 - parseFloat(this.relativeStrokeWidth()) / 2, 10);
      } else {
        return 0;
      }
    },
    trackPath() {
      const radius = this.radius();
      const isDashboard = this.options.vizType === "dashboard";

      return `
          M 50 50
          m 0 ${isDashboard ? "" : "-"}${radius}
          a ${radius} ${radius} 0 1 1 0 ${isDashboard ? "-" : ""}${radius * 2}
          a ${radius} ${radius} 0 1 1 0 ${isDashboard ? "" : "-"}${radius * 2}
          `;
    },
    perimeter() {
      return 2 * Math.PI * this.radius();
    },
    rate() {
      return this.options.vizType === "dashboard" ? 0.75 : 1;
    },
    strokeDashoffset() {
      const offset = (-1 * this.perimeter() * (1 - this.rate())) / 2;
      return `${offset}px`;
    },
    trailPathStyle() {
      let style = {};
      style['stroke-dasharray'] = `${this.perimeter() * this.rate()}px, ${this.perimeter()}px`,
        style['stroke-dashoffset'] = this.strokeDashoffset()
      return style

    },
    circlePathStyle() {
      let style = {};
      style['stroke-dasharray'] = `${this.perimeter() * this.rate() * (this.options.percentage / 100)}px, ${this.perimeter()}px`,
        style['stroke-dashoffset'] = this.strokeDashoffset(),
        style['transition'] = "stroke-dasharray 0.6s ease 0s, stroke 0.6s ease";
      return style

    }
  },
  created() {
    this.options = this.copyObj({}, this.defaultOption, this.objVal);
    // if (this.options.preview && !(FViz.LAYTOUT_ABSLOUTE == this.options.layoutMode)) {
    //   this.$nextTick(() => {
    //     debugger;
    //     this.options.fheight = this.$refs.renderCont.offsetWidth;
    //     this.options.fwidth = this.$refs.renderCont.offsetHeight;
    //   });
    // }

  },
  mounted() {
    if (this.options.preview && !(FViz.LAYTOUT_ABSLOUTE == this.options.layoutMode)) {
      this.options.fwidth = this.$refs.renderCont.offsetWidth;
      this.options.fheight = this.$refs.renderCont.offsetHeight;
    }



  },
  computed: {
    defaultOption() {
      return {

        fwidth: 160,
        fheight: 160,
        percentage: 0,
        strokeWidth: 10,
        vizType: "circle",
        pgsColor: "black",
        strokeLinecap: "round",
        labelFontSize: "12",
        lableLineHeight: 2
      }
    },
    stroke() {
      let ret = this.options.pgsColor;
      // if (this.color) {
      //   ret = this.getCurrentColor(this.percentage);
      // } else {
      //   switch (this.status) {
      //     case "success":
      //       ret = "#13ce66";
      //       break;
      //     case "exception":
      //       ret = "#ff4949";
      //       break;
      //     case "warning":
      //       ret = "#e6a23c";
      //       break;
      //     default:
      //       ret = "#20a0ff";
      //   }
      // }
      return ret;
    },
  },
  activated() {

  },
  destroyed() {

  },

})
